fix: Organization Users page needs responsiveness #10413
Conversation
WalkthroughThe changes update the layout and styling across multiple components to improve responsiveness. Modifications include adding the flex-wrap property, adjusting margin classes, and applying text truncation for long usernames. These updates affect the visual presentation without altering any functional logic or public interfaces. Changes
Assessment against linked issues
Possibly related PRs
Suggested labels
Suggested reviewers
Poem
Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
✅ Deploy Preview for care-ohc ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (4)
src/pages/Facility/settings/locations/LocationView.tsx (4)
98-98: Remove unnecessary flex-wrap property.The
flex-wrapproperty has no effect on aflex-colcontainer since columns don't wrap. Consider simplifying to:- <div className="my-4 flex flex-col flex-wrap"> + <div className="my-4 flex flex-col">
99-101: Simplify nested flex containers.While the flex-wrap properties improve responsiveness, the nested structure with multiple flex containers is redundant. Consider simplifying:
- <div className="py-2 flex flex-wrap justify-between"> - <div className="flex flex-col flex-wrap justify-between items-start gap-4"> - <div className="flex flex-wrap items-center gap-4 py-2"> + <div className="py-2 flex flex-wrap items-start justify-between gap-4"> + <div className="flex flex-wrap items-center gap-4">
120-120: Remove unnecessary flex properties from search input.The flex-wrap properties on both the container and input element don't contribute to the layout:
- <div className="flex flex-wrap w-72"> + <div className="w-72"> <Input placeholder={t("search_by_name")} value={searchQuery} onChange={(e) => { setSearchQuery(e.target.value); setPage(1); }} - className="w-full flex flex-wrap" + className="w-full" />Also applies to: 128-128
139-139: Remove trailing space in className.The button styling is good for touch targets, but there's an unnecessary trailing space in the className:
- <Button variant="outline" className="py-2 my-2 "> + <Button variant="outline" className="py-2 my-2">
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (3)
src/pages/Facility/settings/locations/LocationView.tsx(3 hunks)src/pages/Organization/OrganizationUsers.tsx(2 hunks)src/pages/Organization/components/AddUserSheet.tsx(1 hunks)
✅ Files skipped from review due to trivial changes (2)
- src/pages/Organization/components/AddUserSheet.tsx
- src/pages/Organization/OrganizationUsers.tsx
⏰ Context from checks skipped due to timeout of 90000ms (1)
- GitHub Check: cypress-run (1)
🔇 Additional comments (1)
src/pages/Facility/settings/locations/LocationView.tsx (1)
98-151: LGTM! The responsive layout improvements are well implemented.The changes successfully improve the mobile responsiveness of the location view. While there are some opportunities to optimize the flex properties as noted above, the overall direction is good.
|
Include #10429 as well 👍 |
There was a problem hiding this comment.
Changes not relevant to the PR; remove.
| <div> | ||
| <span className="text-sm text-gray-500">{t("username")}</span> | ||
| <p className="text-sm font-medium">{userRole.user.username}</p> | ||
| <div className="flex flex-col flex-wrap gap-2 pt-2 border-t"> |
There was a problem hiding this comment.
Let's add truncate and tooltip for usernames (refer to other examples in codebase).
There was a problem hiding this comment.
Check multiple devices.
Add this issue number in the description as well. |
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (1)
src/pages/Facility/settings/organizations/components/LinkFacilityUserSheet.tsx (1)
146-152: Consider improving text truncation for user details.While the container has the
truncateclass, the name and email might still overflow. Consider adding individual truncation.<div className="flex flex-col truncate"> - <span className="font-medium text-lg"> + <span className="font-medium text-lg truncate"> {selectedUser.first_name} {selectedUser.last_name} </span> - <span className="text-sm text-gray-500"> + <span className="text-sm text-gray-500 truncate"> {selectedUser.email} </span> </div>
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (4)
src/components/Common/UserSelector.tsx(1 hunks)src/pages/Facility/settings/organizations/FacilityOrganizationUsers.tsx(1 hunks)src/pages/Facility/settings/organizations/components/EditFacilityUserRoleSheet.tsx(1 hunks)src/pages/Facility/settings/organizations/components/LinkFacilityUserSheet.tsx(2 hunks)
🚧 Files skipped from review as they are similar to previous changes (1)
- src/pages/Facility/settings/organizations/components/EditFacilityUserRoleSheet.tsx
⏰ Context from checks skipped due to timeout of 90000ms (1)
- GitHub Check: cypress-run (1)
🔇 Additional comments (3)
src/components/Common/UserSelector.tsx (1)
66-66: LGTM! Good improvement for handling long usernames.The addition of the
truncateclass helps prevent text overflow and improves the responsive design by properly handling long usernames.src/pages/Facility/settings/organizations/FacilityOrganizationUsers.tsx (1)
69-69: LGTM! Good responsive design improvement.The addition of
flex-wrapensures proper layout on smaller screens by allowing the title and action buttons to wrap when needed, preventing horizontal overflow.src/pages/Facility/settings/organizations/components/LinkFacilityUserSheet.tsx (1)
139-139: LGTM! Good responsive design improvements.The changes improve the handling of long text content and ensure proper wrapping on smaller screens:
- Added
flex-wrapfor better layout flexibility- Added
truncateclasses to prevent text overflowAlso applies to: 145-145, 156-156
There was a problem hiding this comment.
Let's add tooltip and truncate for this as well (TooltipComponent).
Proposed Changes
Before Update:
After Update:
EDIT 1: Color of Link User button changed. Now it is same as earlier.
EDIT 2: Fixes #10429
@ohcnetwork/care-fe-code-reviewers
Merge Checklist
Summary by CodeRabbit